<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        table{
            text-align: center;
        }
    </style>
    <script>
        function $(id){
            return document.getElementById(id);
        }
        window.onload = function (){
            //得到tbody中所有的input对象
            let inputArray = $("data").getElementsByTagName("input");
            for (let i=0;i<inputArray.length;i++){
                if (inputArray[i].type === "number"){//判断是输入框
                    inputArray[i].onchange= function (){
                        changeNum(this);
                    }
                }else{
                    inputArray[i].onclick=function (){
                        removeProduct(this);
                    }
                }
            }
            showTotal();
        }

        /**
         * 修改购买数量
         * @param numberObj 数量文本框对象
         */
        function changeNum(numberObj){
            if (numberObj.value === 0 || numberObj.value<1){
                numberObj.value=1;
            }
            //得到单价
            // parentNode 表示得到当前元素的父元素
            // previousElementSibling   表示得到当前元素上一个元素兄弟节点
            // nextElementSibling  得到当前元素的下一个兄弟元素节点
            let single = numberObj.parentNode.previousElementSibling.innerHTML;
            let price = numberObj.parentNode.nextElementSibling;
            price.innerHTML = numberObj.value * single;
            //调用函数显示总价
            showTotal();
        }
        function showTotal(){
            let total=0;
            let inputObj =$("data").getElementsByTagName("input");
            for (let i=0;i<inputObj.length;i++){
                if (inputObj[i].type==="button"){
                    let price=inputObj[i].parentNode.previousElementSibling.innerHTML;
                    total+=parseInt(price);
                }
            }
            $("total").innerText = total;
        }
        /**
         * 移除够买的商品
         * @param buttonObj 移除按钮对象
         */
        function removeProduct(buttonObj){
            let trObj = buttonObj.parentNode.parentNode;
            trObj.remove();
            showTotal();
        }
    </script>
</head>
<body>
    <table border="1" cellspacing="0" width="50%">
        <thead><tr><th>编号</th> <th>商品名</th><th>单价</th> <th>购买数量</th><th>单项总价</th><th>操作</th></tr></thead>
        <tbody id="data">
            <tr><td>001</td><td>面包</td><td>5</td><td><input type="number" value="1" min="1"></td><td>5</td><td><input
                    type="button" value="移除商品"></td></tr>
            <tr><td>002</td><td>火腿</td><td>2</td><td><input type="number" value="1" min="1"></td><td>2</td><td><input
                    type="button" value="移除商品"></td></tr>
            <tr><td>003</td><td>可口可乐</td><td>3</td><td><input type="number" value="1" min="1"></td><td>3</td><td><input
                    type="button" value="移除商品"></td></tr>
            <tr><td>004</td><td>辣条</td><td>4</td><td><input type="number" value="1" min="1"></td><td>4</td><td><input
                    type="button" value="移除商品"></td></tr>
        </tbody>
        <thead><tr><td>商品总价：</td><td id="total"></td></tr></thead>
    </table>
    <span class="topright">&times;</span>
</body>
</html>